<template>
	<view class="content">
		<text class="title-1">子组件B</text>
		<view class="coma_box">
			<text>ComA传进来的值:</text>
			<text style="font-weight: bold;color: red;">{{intent}}</text>
		</view>
		<view class="reply-area" style="margin: 10rpx;">
			<text>回传值:</text>
			<input type="text" v-model="callbackValue" style="color: yellow;"/>
			<button @click="sendOutside()" size="mini">回传</button>
		</view>
	</view>
</template>

<script>
	export default {
		name:"ComB",
		data() {
			return {
				callbackValue:'',
				intent:''
			};
		},
		created() {
			console.log("created comB");
			uni.$on('fasong',(msg)=>{
				console.log("COMB 处理回调" + msg);
				this.intent = msg;
			})
		},
		mounted() {
			console.log("mounted comB");
		},
		methods:{
			sendOutside(){
				console.log('comB sentOut');
				this.$emit('callBackFun',this.callbackValue)
			}
		}
	}
</script>

<style>
	input{
		flex: 1;
		margin: 0 8px;
		padding: 4px;
		border: 1px solid #ccc;
		border-radius: 4px;
		background-color: #ccc;
	}
	.content{
		margin: 30px;
		padding: 20px;
		border-radius: 10px;
		background-color: aqua;
		box-shadow: 0 2px 4px rgba(1, 0.5, 0.4, 0.4);
	}
	.title-1{
		padding-top: 5rpx;
		font-size: 30px;
		font-weight: bold;
		display: block;
		margin-bottom: 8px;
		text-align: center;
	}
	.coma_box{
		margin-top: 10px;
	}
	.reply-area{
		display: flex;
		align-items: center;
		margin-top: 8px;
	}
</style>